<template>
	<s-layout title="评价" navbar="normal" :bgStyle="{color:'#fff'}">
		
		<view class="content">
			<su-fixed :sticky="true">
				<view class="bg-white ss-flex justify-between top-line align-center ss-p-x-28">
					<view class="title ss-line-1">{{state.title}}</view>
					<!-- 根据评分显示 -->
					<!-- <view>
						<view class="font-1" style="color:#FBA503;text-align: right; ">好评率</view>
						<view class="rate ss-m-t-12 ss-flex-row ss-row-left ss-col-center">
							<template v-if="bolidStar > 0"  v-for="i in bolidStar" :key="i" >
								<image @tap="tapStar(i,'bolidStar')" src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441592746.png" mode="aspectFill" class="selected ss-m-r-8"></image>
							</template>
							<template v-if="emptyStar>0" v-for="h in emptyStar" :key="h">
								<image @tap="tapStar(h,'emptyStar')"  src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441591230.png" mode="aspectFill" class="selected ss-m-r-8"></image>
							</template>
						</view>
					</view> -->
				</view>
			</su-fixed>
			
			
			<view class="comment-item" v-for="(item,index) in state.list" :key="index">
				<view class="ss-flex align-start">
					<image style="width:60rpx;height:60rpx " :src="sheep.$url.cdn(item.user_avatar)"></image>
					<view class="ss-m-l-18">
						<view class="name">{{item.user_nickname}}</view>
						<view class="ss-flex ss-m-y-10">
							<image v-for="i in item.level" :key="index" src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441592746.png" mode="aspectFill" class="selected ss-m-r-8"></image>
							<text style="color:#FBA503">{{item.level}}</text>
						</view>
						<view style="line-height: 1.3em;">{{item.content}}</view>
						<template v-if="item.images?.length>0">
							<template   v-for="(url,ind) in item.images" :key="ind" class="ss-m-t-10">
								<image @tap="onImgPreview(item.images,ind)" style="width: 200rpx;height:200rpx;border-radius: 10rpx;" :src="sheep.$url.cdn(url)" mode="aspectFill" class="ss-m-r-12 ss-m-b-10"></image>
							</template>
						</template>
					</view>
				</view>
				<view class="time">{{timeFormat(item.reply_time)}}</view>
			</view>
			
			
			
			
			<s-empty v-if="state.list.length === 0" icon="/static/data-empty.png" text="暂无评论">
			</s-empty>
		</view>
		
		<su-fixed bottom>
		  <view class="bg-white ss-flex justify-between ss-p-x-30 ss-p-b-30 ss-p-t-10" style="font-size:36rpx;color:#9E9E9E;">
			  <view class="ss-flex">
				  <image style="width: 109rpx;height: 96rpx;" :src="sheep.$url.cdn(state.img)" mode="aspectFill" class=" ss-m-r-20"></image>
				  <view>{{state.title}}</view>
			  </view>
			  
			  <button @tap="toPlay" class="ss-reset-button btn font-2">去支付</button>
		  </view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {ref, reactive, computed ,nextTick } from 'vue'
	import { onLoad, onShow, onHide,onPageScroll  } from '@dcloudio/uni-app';
	import dayjs from 'dayjs';
	const state = reactive({
		id:'',
		title:'',
		mark:5,
		list:[],
		page:0,
		loadStatus: 'more',
		img:''
	})
	//实心星星数量
	const bolidStar = computed(()=>{
		
		return parseInt(state.mark);
	
	})
	function timeFormat(time){
		return dayjs(time * 1000).format('YYYY-MM-DD HH:mm:ss');
	}
	//计算空心
	const emptyStar = computed(()=>{
		
		if(Math.ceil(state.mark)==5){
			
			if(parseFloat(state.mark)<5){
				return 1;
			}else if(parseFloat(state.mark)==5){
				return 0;
			}
		}else{
			return 5-Math.ceil(state.mark);
		}
	})
	function toPlay(){
		console.log('----')
		sheep.$router.go('/pages/merchant/surprise/pay',{
			id:state.id,
			title:state.title,
			img:state.img ||''
		})
	}
	
	// 预览图片
	function onImgPreview(urls,current) {
		var urlArr=urls.map(item=>(sheep.$url.cdn(item)))
		console.log(urls,current)
		uni.previewImage({
		  urls: urlArr,
		  current,
		});
	}
	 
	async function getList(){
		if (state.loadStatus == 'no-more') return
		state.loadStatus = 'loading'
		const res = await sheep.$api.merchant.surprise.commentList({
			id:state.id,
			page:state.page+1,
			list_rows:10,
		})
		if(res.error==0){
			state.page=res.data.current_page
			if(state.page==1){
				state.list=res.data.data
			}else{
				state.list=state.list.concat(res.data.data)
			}
			
			state.loadStatus = (res.data.current_page >= res.data.last_page) ? 'no-more' : 'more'
		}
	}
	onPageScroll(()=>{
		getList()
	})
	
	onLoad((opt)=>{
		if(opt.title){
			state.title = opt.title
		}
		if(opt.img){
			state.img = decodeURIComponent(opt.img)
		}
		if(opt.id){
			state.id = opt.id
		}
		if(opt.mark){
			state.mark = opt.mark
		}
		
		getList()
	})
	
	
	
</script>

<style lang="scss" scoped>
	
	.content{
		padding-bottom:170rpx;
		.selected{
			width:40rpx;
			height:40rpx;
		}
		.top-line{
			padding-bottom:54rpx;
			border-bottom: 2rpx solid #D8D8D8;
			.title{
				color:#000000;
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 67rpx ;
				width:500rpx
			}
			.rate{
				
				.recommend{
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
				}
				.num{
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
				}
			}
		}
		.comment-item{
			padding:30rpx 20rpx 25rpx 28rpx;
			border-bottom: 10rpx solid #D8D8D8;
			color:#9E9E9E;
			font-size: 30rpx;
			position:relative;
			.name{
				width:300rpx;
				word-break:break-all;
				word-wrap: break-word
			}
			.time{
				position:absolute;
				right:20rpx;
				top:30rpx;
			}
		}
		
		
		
	}
	.btn{
		background: #F7D142;
		width: 159rpx;
		height: 60rpx;
		border-radius: 10rpx;
		color:#fff
	}
</style>